<template>
  <div class="add-teacher">
    <el-dialog
      title="添加老师"
      :visible.sync="dialogVisible"
      width="1000px"
      :close-on-click-modal="false"
      @closed="resetForm('form')"
    >
      <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="userName">
                <el-input v-model.trim="form.userName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请账号">
                <el-switch v-model="apply"> </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="account-box">
              <el-form-item label="账号" prop="account" v-if="apply">
                <el-input
                  v-model.trim="form.account"
                  autocomplete="off"
                  @blur="handleBlur()"
                ></el-input>
              </el-form-item>
              <span
                v-show="apply && accountAali == 0"
                class="el-icon-question tpic color-info"
              ></span>
              <span
                v-show="apply && accountAali == 1"
                class="el-icon-success tpic color-success"
              ></span>
              <span
                v-show="apply && accountAali == 2"
                class="el-icon-error tpic color-danger"
              ></span>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码" prop="password" v-if="apply">
                <el-input
                  type="password"
                  autocomplete="new-password"
                  v-model.trim="form.password"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="职称" prop="jobTitle">
                <JobTitleSelect @emit="setJobTitle" />
                <!-- <el-input v-model.trim="form.jobTitle"></el-input> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model.trim="form.phone"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="头像" prop="attachmentId">
            <UploadHeadPic v-if="dialogVisible" @e-headPicId="setHeadPic" />
          </el-form-item>
          <!-- <el-form-item label="单位" prop="deptId">
            <UnitSelect v-if="dialogVisible" @e-unitData="setUnitId" />
          </el-form-item> -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="校区" prop="deptId">
                <UnitSelect @e-unitData="setUnitId" :selectType="1" :level="2" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="简介">
            <UEditor
              v-if="dialogVisible"
              ref="ueditor"
              :ueWidth="875"
              :defaultMsg="form.content"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  type="custom" v-preventReClick  @click="submitForm('form')">提 交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { tbUserAdd, tbUserVali } from "@/api/admin/user/user-manage.js";
import Bus from "@/utils/bus.js";
export default {
  components: {
    UploadHeadPic: () => import("@/components/uploadHeadPic"),
    UnitSelect: () => import("@/components/unitSelect"),
    JobTitleSelect: () => import("@/components/dataSelect/jobTitleSelect"),
  },
  data() {
    return {
      dialogVisible: false,
      apply: false, //申请账号
      accountAali: 0,
      form: {
        account: "",
        password: "",
        userName: "", //昵称
        jobTitle: "", //职称
        deptId: "", //部门id
        phone: "", //电话
        attachmentId: "", //头像
        content: "",
        del: 1, //1.可用 2.不可用
        // del: "2", //不可用，需审核
        // definitionCode: "11",
      },
      rules: {
        userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        jobTitle: [{ required: true, message: "请输入职称", trigger: "blur" }],
        deptId: [{ required: true, message: "请输选择单位", trigger: "blur" }],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        content: [{ required: true, message: "请输入简介", trigger: "blur" }],
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  mounted() {
    Bus.$on("showDialogCourseTeamAddTeacher", (v) => {
      this.dialogVisible = true;
    });
  },
  beforeDestroy() {
    Bus.$off("showDialogCourseTeamAddTeacher");
  },
  methods: {
    setHeadPic(v) {
      this.form.attachmentId = v;
    },
    setUnitId(v) {
      this.form.deptId = v;
    },
    setJobTitle(v) {
      this.form.jobTitle = v;
    },
    submitForm(form) {
      this.form.del = this.apply ? 1 : 2;
      if (!this.apply) {
        this.form.del = 1;
        this.form.account = "";
        this.form.password = "";
        delete this.form.definitionCode;
      } else if (this.accountAali != 1) {
        this.$message({
          message: "请输入账号",
          type: "warning",
        });
        return;
      }
      if (this.apply) {
        this.form.del = 2;
        this.form.definitionCode = "11";
      }
      this.form.content = this.$refs.ueditor.message;
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.add();
        }
      });
    },
    //添加用户
    add() {
      tbUserAdd(this.form).then((res) => {
        if (res.data.code == 0) {
          let userInfo = {
            userId: res.data.data,
          };
          this.dialogVisible = false;
          this.$emit("e-userData", userInfo);
        }
      });
    },
    handleBlur() {
      if (!this.form.account) {
        this.accountAali = 0;
        return;
      }
      tbUserVali({ account: this.form.account }).then((res) => {
        if (res.data.msg == "0") {
          this.accountAali = 1;
        } else {
          this.accountAali = 2;
          this.$message({
            message: "账号已存在",
            type: "error",
          });
        }
      });
    },
    //重置表单
    resetForm(form) {
      this.apply = false;
      this.accountAali = 0;
      this.$refs[form].resetFields();
      for (let key in this.form) {
        this.form[key] = "";
      }
    },
  },
};
</script>
<style scoped>
.account-box {
  position: relative;
}
.tpic {
  position: absolute;
  right: -20px;
  top: 10px;
  font-size: 20px;
}
.add-teacher >>> .unit-select .el-cascader .el-input {
  width: 390px;
}
</style>